import Button from 'antd/lib/button'
import * as React from 'react'
import { connect, dispatch, getState, PopupStore } from '../store'
import styles from './Popup.less'
import { _ShowInfo } from '../../content/components/ShowInfo'
import { Spin } from 'antd'
import { api_gitee } from '../../../apis'
import { MessageType, sendMessage } from '../../../util/message'

const doStar = async () => {
    // console.log('doStar form popup')
    dispatch(state => ({ ...state, loading: true }))
    await api_gitee.star()
    const res = await api_gitee.user_info()
    dispatch(state => ({ ...state, loginUser: res.data, loading: false }))
}

const _Popup: React.FC<PopupStore> = (props) => {
    return <div className={styles.popup}>
        <Spin spinning={props.loading} size="large">
            <_ShowInfo doStar={doStar} loginUser={props.loginUser} loading={false}/>
            <div>
                <Button onClick={() => open(`/assets/html/main.html`)}>打开应用页面</Button>
            </div>
            <br />
            <div>
                <Button onClick={() => sendMessage(MessageType.CONTENT_START)}>运行content脚本</Button>
            </div>
        </Spin>
    </div>
}
const Popup = connect(getState)(_Popup)
export default Popup